<!DOCTYPE html>
<html>
  <head>
    <title>WebSocket Example</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
    <script src="https://cdn.jsdelivr.net/npm/sockjs-client@1/dist/sockjs.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/stompjs@2.3.3/lib/stomp.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/sockjs-client/1.4.0/sockis.mjn.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/stomp.js/2.3.3/stomp.min.js"></script>
  </head>
  <body>
    <div id="app">
      <button @click="connectWebSocket">连接 WebSocket</button>
      <div v-if="connected">
        <h3>已连接</h3>
        <button @click="disconnectWebSocket">断开连接</button>
      </div>
      <div>
        <h3>接收消息</h3>
        <div v-for="(message, index) in messages" :key="index">
          <p>{{ message }}</p>
        </div>
      </div>
      <div v-if="connected">
        <h3>发送消息</h3>
        <input v-model="messageInput" type="text" placeholder="输入消息" />
        <button @click="sendMessage">发送</button>
      </div>
    </div>

    <script>
      new Vue({
        el: "#app",
        data: {
          stompClient: null,
          connected: false,
          messages: [],
          messageInput: "",
        },
        methods: {
          // // 连接 WebSocket
          // connectWebSocket() {
          //   const socket = new SockJS("http://localhost:8080/ws-socket");
          //   this.stompClient = Stomp.over(socket);
          //   this.stompClient.connect({}, (frame) => {
          //     console.log("Connected: " + frame);
          //     this.connected = true;

          //     // 订阅消息
          //     this.stompClient.subscribe("/topic/messages", (message) => {
          //       this.messages.push(JSON.parse(message.body));
          //     });

          //     // 订阅重连消息
          //     this.stompClient.subscribe("/topic/connect", (message) => {
          //       console.log("Reconnected: " + message.body);
          //     });
          //   });
          // },

          // // 断开 WebSocket 连接
          // disconnectWebSocket() {
          //   if (this.stompClient && this.stompClient.connected) {
          //     this.stompClient.disconnect();
          //     this.connected = false;
          //   }
          // },

          // // 发送消息
          // sendMessage() {
          //   if (this.stompClient && this.stompClient.connected) {
          //     this.stompClient.send("/app/send", {}, JSON.stringify({ message: this.messageInput }));
          //     this.messageInput = '';
          //   } else {
          //     alert('未连接到 WebSocket');
          //   }
          // }
          connectWebSocket() {
            const socket = new SockJS("http://localhost:8080/ws-socket");
            // var socket = new WebSocket('ws://localhost:8080/websocket');
            this.stompClient = Stomp.over(socket);
            this.stompClient.connect({}, (frame) => {
              console.log("Connected: " + frame);
              this.stompClient.subscribe("/topic/messages", (message) => {
                //接收到socket数据参数
                console.log(message.body);
              });
              this.stompClient.subscribe("/topic/connect", (message) => {
                //接受到socket服务器重连信息
                console.log(message.body);
              });
            });
          },
        },
      });
    </script>
  </body>
</html>
